<!-- @format -->

<template>
  <div class="markdown-container">
    <h1>Markdown与数学公式渲染</h1>
    <MarkdownRenderer :content="markdownContentByApp" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  import MarkdownRenderer from './MarkdownRenderer.vue'

  export default defineComponent({
    name: 'MarkdownView',
    components: {
      MarkdownRenderer,
    },
    setup() {
      const markdownContentByApp = ref(`
      ### 分析
- **公式含义**：这是一个重要极限公式。它表明当自变量 \(x\) 趋近于 \(0\) 时，正弦函数 \(\sin x\) 与自变量 \(x\) 的比值的极限值为 \(1\) 。
- **证明思路**：可以利用单位圆中的三角函数线来证明。在单位圆中，通过比较三角形和扇形的面积关系，得到关于 \(\sin x\) 、 \(x\) 、 \(\tan x\) 的不等式关系，再利用夹逼准则证明该极限。
- **应用场景**：
    - **求极限**：在求一些复杂的函数极限时，常常会将其变形，使其能够运用这个重要极限来求解。例如求 \(\lim_{x \to 0}\frac{\sin 3x}{x}\) ，可变形为 \(\lim_{x \to 0}\frac{\sin 3x}{3x}\times3\) ，再利用该公式得到结果为 \(3\) 。
    - **等价无穷小替换**：当 \(x \to 0\) 时， \(\sin x\) 与 \(x\) 是等价无穷小，在求极限过程中，某些情况下可以将 \(\sin x\) 替换为 \(x\) 来简化计算，但要注意替换的条件，通常在乘除运算中使用等价无穷小替换较为安全。 
`)

      const markdownContent = ref(`
# Markdown与KaTeX数学公式示例

## 基础Markdown语法

### 文本格式化
**粗体文本** 和 *斜体文本*

### 列表
- 项目1
- 项目2
- 项目3

### 链接和图片
[Vue.js官网](https://vuejs.org/)

### 代码
\`\`\`javascript
const greeting = 'Hello World!';
console.log(greeting);
\`\`\`

## 数学公式示例

### 行内公式
质能方程: $E = mc^2$

欧拉公式: $e^{i\pi} + 1 = 0$




### 块级公式
$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$

$$\int_{a}^{b} f(x) \, dx = F(b) - F(a)$$

### 自己测试的数据 start
$x_{1,2}$  

 $e^{i\pi} + 1 - e_12456 = 0$

$x_{1,2} = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$

$\alpha, \beta, \gamma, \delta, \epsilon, \zeta, \eta, \theta$

$\alpha$

$\theta$

$x_{1,2}$

$\frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $

### 自己测试的数据 end
### 矩阵
$$\begin{pmatrix}
 a & b \\
 c & d
\end{pmatrix}$$

### 分数和上下标
$x_{1,2} = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$


$\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$
### 希腊字母
$\alpha, \beta, \gamma, \delta, \epsilon, \zeta, \eta, \theta$

$\Gamma, \Delta, \Theta, \Lambda, \Xi, \Pi, \Sigma, \Phi, \Psi, \Omega$
    `)

      return {
        markdownContent,
        markdownContentByApp,
      }
    },
  })
</script>

<style scoped>
  .markdown-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }

  h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50;
  }
</style>
